<template>
  <div>
    <header>
      <span>部门名称：</span><Input v-model="departmentQuery.name" placeholder="请输入部门名称" style="width: 300px"/>
      <span>状态：</span>
      <Select v-model="departmentQuery.status" style="width:200px">
        <Option v-for="item in states" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <Button type="primary" @click="query" class="query">查询</Button>
      <Button @click="reset" class="reset">重置</Button>
    </header>
    <div>
      <tree-table ref="tree">
      </tree-table>
    </div>
  </div>
</template>

<script>

import TreeTable from './tree-table/tree-table'
export default {
  name: 'OrganizationTable',
  components: {
    TreeTable
  },
  data() {
    return {
      states: [
        {
          value: '1',
          label: '正常'
        },
        {
          value: '0',
          label: '停用'
        }],
      departmentQuery: {
        name: '',
        status: '1',
        limit: '10',
        page: '1'
      },
    }
  },
  methods: {
    query() {
       this.$refs.tree.getTableData(this.departmentQuery)
    },
    reset() {
      this.departmentQuery.name = ''
      this.departmentQuery.state = '1'
    }
  },
  mounted() {
    this.query()
  }
}

</script>

<style scoped>
span {
  margin-left: 20px;
}

.query {
  margin-left: 50px;
}

Button {
  margin: 5px;
}

</style>
